import React, { useState } from 'react';
import { Button, Form, Radio } from 'antd';
import DynamicRules from '../../components/DynamicRules';
import { RuleType } from '../../components/DynamicRules';

interface Props {

}

const RULE_TYPE = {
  doctorsNumberWithFixed: 'doctorsNumberWithFixed',
  doctorsNumberWithPercent: 'doctorsNumberWithPercent',
  customerPriceWithFixed: 'customerPriceWithFixed',
  customerPriceWithPercent: 'customerPriceWithPercent'
};

const mockData = {
  doctorsNumberWithFixed: [{
    start: 10,
    end: 20,
    reward: 5,
  }, {
    start: 20,
    end: '',
    reward: 15,
    infinity: true,
  }],
  doctorsNumberWithPercent: [{
    start: 20,
    end: 30,
    reward: 50,
  }, {
    start: 120,
    end: 140,
    reward: 145,
  }, {
    start: 20,
    end: 40,
    reward: 50,
  }, {
    start: 120,
    end: '',
    reward: 145,
    infinity: true,
  }],
  customerPriceWithFixed: [{
    start: 120,
    end: '',
    reward: 145,
    infinity: true,
  }],
  customerPriceWithPercent: [{
    start: 20,
    end: 102,
    reward: 50,
  }, {
    start: 280,
    end: 900,
    reward: 1045,
  }, {
    start: 220,
    end: undefined,
    reward: 90,
    infinity: true,
  }],
};

const AddRules: React.FC<Props> = () => {
  const [value, setValue] = useState(RULE_TYPE.doctorsNumberWithFixed as RuleType);

  const onChange = (e: any) => {
    setValue(e.target.value);
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const handleChange = (val: any) => {
    console.log('val', val);
  };

  return (
    <Form
      name='basic'
      onFinish={onFinish}
    >
      <Form.Item name='chk'>
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={RULE_TYPE.doctorsNumberWithFixed}>首处医生+固定金额</Radio>
          <Radio value={RULE_TYPE.doctorsNumberWithPercent}>首处医生+分润</Radio>
          <Radio value={RULE_TYPE.customerPriceWithFixed}>首处客单价+固定金额</Radio>
          <Radio value={RULE_TYPE.customerPriceWithPercent}>首处客单价+分润</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item name='ru'>
        <DynamicRules onChange={handleChange} type={value} dataSource={mockData[value]} />
      </Form.Item>
      <Form.Item >
        <Button type='primary' htmlType='submit'>
          外部submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default AddRules;
